<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box m-b-20">
        <user-tab-list
          :list="tablist"
          :normal="true"
          :center="true"
          @click-tab="changeTab"
        ></user-tab-list>
        <div class="main-padding" style="position: relative">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title nes c-d"
              >{{ tabSelect == 0 ? "代购域名" : " 出售域名" }}：</span
            >
            <Input
              v-model.trim="dn"
              :placeholder="
                tabSelect == 0 ? '请输入您想代购的域名' : '请输入您想出售的域名'
              "
              maxlength="30"
              style="width: 400px"
              type="text"
              size="large"
            />
          </div>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title nes c-d"
              >{{ tabSelect == 0 ? "预算" : "售价" }}：</span
            >
            <Input
              v-model.trim="budget"
              maxlength="30"
              style="width: 400px"
              type="number"
              size="large"
            />
          </div>
          <div class="flx-row-s-s m-b-20">
            <span class="item-title c-d">备案：</span>
            <Input
              v-model="remark"
              type="textarea"
              style="width: 400px"
              :rows="4"
            />
          </div>
          <Checkbox v-model="agree" class="c-g m-l-285"
            >我已阅读并接受</Checkbox
          >
          <span class="c-b">《190域名委托服务协议》</span>
          <div
            class="m-l-285 big-button-size-40 user-strong-button m-b-20"
            style="width: 120px; margin-top: 20px"
          >
            提交申请
          </div>
          <span class="c-d f-14 m-l-285"
            >温馨提示：提交申请前，请先进行
            <a class="c-b" href="/login">登录</a> 或
            <a class="c-b" href="/login/re">注册</a></span
          >
        </div>
      </div>
      <agent-list></agent-list>
      <div class="box l-area flx-col-s-c" style="margin-top: 20px">
        <h2 class="f-20 c-d2 f-w-600 m-b-30" style="text-align: center">
          顾问注册服务流程
        </h2>
        <div class="dnpa-l"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {
    userTabList: () => import("_c/tabList/userTabList.vue"),
    agentList: () => import("_c/agentList/agentList.vue"),
  },
  data() {
    return {
      loading: false,
      formLoading: false,
      breadCrumb: [{ name: "商标服务", to: "/rmregister" }],
      search: "",
      tablist: [
        {
          name: "委托代购",
        },
        {
          name: "委托出售",
        },
      ],
      tabSelect: 0,
      typeTabList: ["委托代购商标", "委托出售商标"],
      typeSelect: 0,
      dn: "",
      categaryList: [],
      type: null,
      budget: null,
      remark: "",
    };
  },
  mounted() {},
  methods: {
    // 切换tab栏
    changeTab(index) {
      this.tabSelect = index;
    },
  },
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box {
    background-color: #fff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
  }
  .top-box {
    padding: 40px 0;

    .search {
      @include size(580px, 46px);
      background-color: #fff;
      padding-left: 20px;
      padding-right: 15px;
      border: #f9521f solid 1px;
      border-radius: 5px 0 0 5px;
      line-height: 44px;
      font-size: 14px;
      color: #3d3d3d;
    }
    .search-buttom {
      @include size(120px, 46px);
      @include h-c(#f9521f, #fa754c, #fff, null);
      @include btn-s(null, 46px, 0 5px 5px 0);
      font-size: 14px;
    }
  }
  .main-padding {
    padding: 35px 130px 35px;
  }
  .tab-item {
    transition: color 0.3s, font-weight 0.3s;

    &.active {
      color: #f9521f;
      font-weight: 600;
    }
    &.normal {
      @include h-c(null, null, rgba(#3d3d3d, 0.8), #f9521f);
      cursor: pointer;
    }
  }
  .item-title {
    width: 130px;
    text-align: right;
    margin-right: 15px;
    line-height: 40px;
    font-size: 14px;
    margin-left: 140px;

    &.nes::before {
      content: "*";
      color: #f9521f;
      font-weight: 600;
    }
  }
}
.m-b-20 {
  margin-bottom: 20px;
}
.m-l-285 {
  margin-left: 285px;
}
.tips-area {
  padding: 22px;
  border: $mainColor solid 1px;
  background-color: $color-main;
  font-size: 14px;
  color: $mainColor;

  p {
    line-height: 24px;
  }
}
.l-area {
  padding: 40px;
}
.dnpa-l {
  width: 748px;
  height: 154px;
  margin-top: 40px;
  @include bg-setting("dnpa-l", cover, center);
}
</style>